<template>
  <div>
    <div v-if="showPageType === 1">
      <a-spin :spinning="isLoading">
        <a-form ref="formSearchRef" name="advanced_search" class="ant-advanced-search-form" :model="formSearchField">
          <a-row :gutter="24">
            <a-col :span="formSearchColSpan">
              <a-button @click="editData(0, 1, '')" style="margin-bottom: 10px;" type="primary">新增主菜单</a-button>
            </a-col>
          </a-row>
        </a-form>

        <a-table bordered :data-source="dataListSource" :columns="dataListColumns" @change="dataTableChange" rowKey="id"
          v-if="dataListSource.length" :defaultExpandAllRows="true" :pagination="false" >
          <template #bodyCell="{ column, text, record, index }">
            <template v-if="column.dataIndex === 'level'">
              <span style="font-weight: 700;font-size:17px;" v-if="record.level === 1">主菜单</span>
              <span style="font-weight: 500; font-size:17px;margin-left: 15px;"
                v-else-if="record.level === 2">子菜单</span>
              <span style="margin-left: 30px;" v-else-if="record.level === 3">按钮</span>
            </template>
            <template v-if="column.dataIndex === 'icon'">
              <span v-if="record.level === 1">icon：{{ record.icon }}</span>
              <span v-else-if="record.level === 2">链接：{{ record.url }}</span>
              <span v-else-if="record.level === 3"></span>
            </template>
            <template v-if="column.dataIndex === 'status_text'">
              <span style="color: red;" v-if="record.status === 2">{{ text }}</span>
            </template>
            <template v-if="column.dataIndex === 'operation'">
              <a-popconfirm title="确认要删除吗？" @confirm="onChangeStatus(record.id, 2, index)" v-if="record.status === 1">
                <a-tooltip color="red" placement="rightTop">
                  <template #title>
                    <span>当前是正常状态，点击可删除此数据</span>
                  </template>
                  <a-tag color="green">删除</a-tag>
                </a-tooltip>
              </a-popconfirm>
              <a-popconfirm title="确认要恢复此数据吗？" @confirm="onChangeStatus(record.id, 1, index)"
                v-if="record.status === 2">
                <a-tooltip color="green" placement="leftTop">
                  <template #title>
                    <span>当前是已删除状态，点击可重置为正常状态</span>
                  </template>
                  <a-tag color="red">恢复正常</a-tag>
                </a-tooltip>
              </a-popconfirm>
              <a-tag color="blue" @click="editData(record.id, 2, record.name)" v-if="record.level == 1">新增子菜单</a-tag>
              <a-tag color="orange" @click="editData(record.id, 3, record.name)"
                v-else-if="record.level == 2">新增按钮</a-tag>
            </template>
          </template>
        </a-table>
      </a-spin>
    </div>

    <!-- 新增菜单组件 -->
    <AddMenu v-if="showPageType === 2" ref="addMnuRef" :pid="addPid" :menuName="addMenuName" :level="addLevel" />

    <!-- 新增菜单组件 -->
    <AddOption v-if="showPageType === 3" ref="addOptionRef" :pid="addPid" :menuName="addMenuName" :level="addLevel" />

  </div>
</template>

<script setup>
import { reactive, ref, onMounted, inject } from 'vue';
import { message } from 'ant-design-vue'
import { getAdminMenuList, chgAdminMenuStatus } from "@/api/admin"   //引入api
import AddMenu from './add_menu.vue';
import AddOption from './add_option.vue';

const { refreshCurrentPage } = inject('refreshCurrentPage');  // 依赖注入--刷新当前页面

const showPageType = ref(1);  // 页面类型，1：列表，2：新增菜单，3：新增按钮
const addPid = ref(0);  // 新增菜单的父级id
const addMenuName = ref('');  // 新增菜单的名称
const addLevel = ref(1);  // 新增菜单的级别，1：主菜单，2：子菜单，3：按钮

const formSearchColSpan = ref(8);  // 搜索--每个搜索项暂用宽度（共24宽度）
const isLoading = ref(false);    // 控制loading
const dataListSource = ref([]); // 数据列表
const formSearchRef = ref();  // 表单搜索,ref对象
const statusMap = reactive({
  1: '正常',
  2: '已禁用'
});  //状态映射

// 数据列表字段
const dataListColumns = [
  {
    title: '菜单类型',
    dataIndex: 'level',
  },
  {
    title: '菜单名',
    dataIndex: 'name',
  },
  {
    title: '菜单key',
    dataIndex: 'key',
  },
  {
    title: '菜单icon/跳转链接',
    dataIndex: 'icon',
  },
  {
    title: '排序',
    dataIndex: 'sort',
  },
  {
    title: '状态',
    dataIndex: 'status_text',
    width: 80
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
];

// 获取接口数据列表
const getDataList = () => {
  isLoading.value = true;

  getAdminMenuList({}).then((res) => {
    isLoading.value = false;
    if (res === false) return;

    dataListSource.value = res.data;  //数据列表

    message.success('获取成功');
  }).catch((rej) => {
    isLoading.value = false;
    message.error('失败：' + rej);
  });
};

// 修改数据状态
const onChangeStatus = (id, newStatus, dataIndex) => {
  isLoading.value = true;

  // 提交的数据
  let chgData = {
    id: id,
    status: newStatus
  };

  chgAdminMenuStatus(chgData).then((res) => {
    isLoading.value = false;
    if (res === false) return;

    message.success('操作成功');

    refreshCurrentPage();  //刷新当前页面
  }).catch((rej) => {
    isLoading.value = false;
    message.error('失败：' + rej);
  });
};

// 新增、编辑数据
const editData = (id, level, menuName) => {
  addLevel.value = level;
  addMenuName.value = menuName;
  addPid.value = id;
  // 跳转编辑页面
  if (level === 1) {
    addMenuName.value = '新增主菜单';
    showPageType.value = 2;
  } else if (level === 2) {
    addMenuName.value += '（新增子菜单）';
    showPageType.value = 2;
  } else if (level === 3) {
    addMenuName.value += '（新增按钮）';
    showPageType.value = 3;
  }
};



// 页面加载完成后，获取数据列表
onMounted(() => {
  getDataList();
})
</script>

<style scoped></style>